<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私人工具管理系统</title>
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        :root {
            --mdc-theme-primary: #1976D2;
            --mdc-theme-secondary: #C2185B;
            --mdc-theme-surface: #FFFFFF;
        }

        body {
            margin: 0;
            background-color: #f5f5f5;
        }

        .mdc-top-app-bar {
            position: sticky;
            top: 0;
            z-index: 7;
        }

        .main-content {
            padding: 24px;
        }

        .category-card {
            margin-bottom: 24px;
            padding: 16px;
            border-radius: 8px;
            text-align: center;
        }

        .mdc-layout-grid {
            padding: 0;
        }

        /* 工具卡片样式 */
        .tool-card {
            width: 120px;
            height: 120px;
            border-radius: 24px;
            background: var(--mdc-theme-surface);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
        }

        .tool-card:hover {
            transform: scale(1.05);
        }

        .tool-icon {
            font-size: 48px;
            color: var(--mdc-theme-primary);
        }

        .category-section {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
            margin-bottom: 24px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .category-header {
            text-align: center;
            background: #018786;
            padding: 12px 24px;
            color: white;
            margin: 0;
        }

        .category-title {
            text-align: center;
            margin: 0;
            padding: 16px 0;
            font-weight: 500;
        }

        .mdc-layout-grid__inner {
            display: flex;
            gap: 15px;
            padding: 15px;
        }

        .tool-card {
            position: relative;
        }

        .tool-card::after {
            content: attr(data-tooltip);
            position: absolute;
            top: -40px;  /* 增加提示框与卡片的距离 */
            left: 50%;
            transform: translateX(-50%) translateY(10px); /* 添加初始Y轴偏移 */
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 14px;
            opacity: 0;
            visibility: hidden; /* 添加初始隐藏属性 */
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* 添加 visibility 过渡 */
            pointer-events: none;
            white-space: nowrap;
            z-index: 1000; /* 提升层级确保在最前 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
            display: block; /* 确保伪元素可见 */
        }

        .tool-card:hover::after {
            opacity: 1; /* 修改为1以确保完全显示 */
            transform: translateX(-50%) translateY(0); /* 移除Y轴偏移 */
            visibility: visible; /* 设置为可见 */
            transition-delay: 0.1s; /* 添加短暂延迟避免误触发 */
        }

    </style>
</head>

<body>
    <!-- <header class="mdc-top-app-bar">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-center">
                <span class="mdc-top-app-bar__title">私人工具管理系统</span>
            </section>
        </div>
    </header> -->

    <main class="main-content">
        <div class="mdc-layout-grid">
            <!-- 办公工具 -->
            <div class="category-section">
                <div class="mdc-typography--headline5 category-header">办公工具</div>
                <div class="mdc-layout-grid__inner">
                    <div class="mdc-layout-grid__cell">
                        <a href="#" class="mdc-card__primary-action">
                            <div class="mdc-card tool-card mdc-ripple-surface" style="background: #E8F5E9;"
                                data-tooltip="文档管理">
                                <i class="material-icons tool-icon">description</i>
                            </div>
                        </a>
                    </div>
                    <div class="mdc-layout-grid__cell">
                        <a href="#" class="mdc-card__primary-action">
                            <div class="mdc-card tool-card mdc-ripple-surface" style="background: #FFF8E1;"
                                data-tooltip="共享文件夹">
                                <i class="material-icons tool-icon" style="color: #FFA000;">folder_shared</i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 开发工具 -->
            <div class="category-section">
                <div class="mdc-typography--headline5 category-header">开发工具</div>
                <div class="mdc-layout-grid__inner">
                    <div class="mdc-layout-grid__cell">
                        <a href="tool_set//wpf_fy/wpf_tf.html" class="mdc-card__primary-action">
                            <div class="mdc-card tool-card mdc-ripple-surface" style="background: #E8F5E9;"
                                data-tooltip="XAML翻译工具">
                                <i class="material-icons tool-icon" style="color: #388E3C;">build_circle</i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 项目管理工具 -->
            <div class="category-section">
                <div class="mdc-typography--headline5 category-header">项目管理工具</div>
                <div class="mdc-layout-grid__inner">
                    <a href="#" class="mdc-card__primary-action">
                        <div class="mdc-layout-grid__cell">
                            <div class="mdc-card tool-card mdc-ripple-surface" style="background: #F3E5F5;"
                                data-tooltip="任务管理">
                                <i class="material-icons tool-icon" style="color: #9C27B0;">assignment_turned_in</i>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </main>

    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
        window.mdc.autoInit();
    </script>
</body>

</html>
